<template>
  <div id="login-all">
    <h1>开始你的家族记录之旅</h1>
  </div>


  <!-- 家族成员查询 -->
  <div class="buttom-family-select">
    <el-button @click='gofamilySelect()' plain>家族成员查询</el-button>
  </div>
  <!-- 家族成员信息录入 -->
  <div class="buttom-family-insert">
    <el-button @click='gofamilyInsert()' plain>家族成员信息录入</el-button>
  </div>

  <!-- 家族成员信息修改 -->
  <div class="buttom-family-update">
    <el-button @click='gofamilyUpdate()' plain>家族成员信息修改</el-button>
  </div>
  <!-- 家族成员信息删除 -->
  <div class="buttom-family-delete">
    <el-button @click='gofamilyDelete()' plain>家族成员信息删除</el-button>
  </div>


</template>

<script>

export default {

  // created() {
  //   console.log(localStorage.getItem("name"))
  // }

  name: "home",

  methods: {
    gofamilySelect() {

      this.$router.push('/select');
    },
    gofamilyInsert() {

      this.$router.push('/insert');
    },
    gofamilyUpdate() {

      this.$router.push('/update');
    },
    gofamilyDelete() {

      this.$router.push('/delete');
    },

  },
}
</script>

<style scoped>

#login-all{

  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-image: linear-gradient(
    90deg,
    cyan,
    purple
  );
  background-size: 400%;
  animation: myanimation 10s infinite;

}
@keyframes myanimation{
  0%{
    background-position: 0% 50%;
  }
  50%{
    background-position: 100% 50%;
  }
  100%{
    background-position: 0% 50%;
  }
}

.forts {
  position: center;
  font-size: 40px;
}

.forts-time {
  font-size: 40px;
  position: absolute;
  left: 70%;
  top: 0%;
}

.word-container {
  width: 100%;
  height: 60px;
  background-color: #109e48;
  border-radius: 3px;
}

.family-info {
  font-size: 20px;
  position: absolute;
  top: 20%;
  left: 48%;
}



.buttom-family-select {
  font-size: 20px;
  position: absolute;
  top: 30%;
  left: 47%;
}

.buttom-family-insert {
  font-size: 20px;
  position: absolute;
  top: 40%;
  left: 46%;
}

.buttom-family-update {
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 46%;
}

.buttom-family-delete {
  font-size: 20px;
  position: absolute;
  top: 60%;
  left: 46%;
}



/*img {*/
/*  width: 370px;*/
/*  opacity: 0.4;*/
/*  filter: alpha(opacity=40);*/
/*  !* 针对 IE8 以及更早的版本 *!*/
/*  position: absolute;*/
/*  top: 47%;*/
/*  left: 70%;*/
/*}*/
</style>